<template>
  <div
    v-if="props.userInfo.pkMember"
    class="ml15 mr15 login_box mt08"
    @click.stop="goWxpage"
  >
    <div class="head_img">
      <img :src="nomorelAvatar(props.userInfo.pkMember)" alt="" />
    </div>
    <div>
      <h4 class="f15">{{ props.userInfo?.name }}</h4>
      <p class="desc mt08">NO: {{ desens(props.userInfo?.idNum) }}</p>
    </div>
    <div v-if="userStatus" class="status">{{ userStatus }}</div>
    <van-button v-if="props.isShowCenter" plain size="small" type="primary" class="login_center" @click.stop="handleCenter()">个人中心</van-button>
  </div>
  <div v-else class="ml15 mr15 login_box mt08" @click="goWxLogin">
    <div class="head_img">
      <svg
        id="2433"
        class="icon"
        height="3.6rem"
        viewBox="0 0 1024 1024"
        width="3rem"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          id="2434"
          d="M541.636727 0q29.636727 0 58.762475 6.642715t54.674651 17.884232 45.477046 25.548902 31.169661 28.61477q26.570858 32.702595 38.834331 72.047904t17.373253 75.113772q5.10978 40.878244 5.10978 82.778443 7.153693 5.10978 11.241517 13.285429 4.087824 7.153693 6.642715 18.39521t0.510978 27.592814q-2.043912 21.461078-8.686627 34.235529t-14.818363 19.928144q-9.197605 8.175649-19.417166 11.241517-5.10978 17.373253-10.219561 32.702595-5.10978 13.285429-11.752495 26.05988t-14.818363 19.928144q-19.417166 15.329341-31.680639 26.05988t-16.351297 36.279441q-3.065868 15.329341-2.043912 31.169661t8.686627 31.680639 23.50499 30.147705 44.45509 25.548902q25.548902 10.219561 55.696607 18.39521t58.762475 18.906188 50.586826 26.570858 31.169661 43.433134q5.10978 16.351297 7.664671 40.367265t2.55489 48.542914-3.576846 45.988024-10.730539 32.702595q-5.10978 7.153693-29.125749 14.307385t-59.273453 13.796407-78.690619 11.752495-87.377246 8.686627-84.311377 5.620758-70.003992 2.043912-68.982036-2.043912-81.245509-5.620758-83.289421-8.175649-75.113772-9.708583-57.229541-10.219561-29.636727-10.219561q-10.219561-8.175649-15.840319-50.075848t4.598802-108.327345q5.10978-37.812375 30.147705-57.740519t58.251497-31.680639 68.982036-20.9501 63.361277-26.570858q21.461078-13.285429 32.702595-25.548902t16.351297-24.526946 5.10978-25.548902-1.021956-29.636727q-2.043912-23.50499-16.351297-37.301397t-31.680639-28.103792q-8.175649-7.153693-14.307385-19.928144t-11.241517-26.05988q-5.10978-15.329341-10.219561-32.702595-7.153693-2.043912-14.307385-7.153693-6.131737-5.10978-13.285429-14.307385t-12.263473-26.570858q-6.131737-17.373253-4.598802-31.680639t5.620758-24.526946q4.087824-11.241517 13.285429-21.461078-1.021956-38.834331 4.087824-77.668663 4.087824-32.702595 14.818363-70.51497t32.191617-67.449102q19.417166-28.61477 43.433134-46.499002t49.053892-28.103792 50.075848-13.796407 48.542914-3.576846z"
          fill="#B1B1B4"
        />
      </svg>
    </div>
    <div>
      <h4 class="f15">登录/注册</h4>
      <p class="desc mt08">完成工会实名制认证享受职工福利</p>
    </div>
  </div>
</template>
<script setup>
import Avatar from "@/assets/images/avatar.js";
import { goWxLogin, wxPageRedirect } from "@/utils/common.js";
import { computed } from "vue";
import { useRouter, useRoute } from "vue-router";

const props = defineProps(['userInfo', 'isShowCenter'])
const router = useRouter()
const route = useRoute()
// 获取默认头像
const nomorelAvatar = (str) => {
  let n = str.replace(/\D/g, "").substr(-1) || 0;
  return Avatar["pic" + n];
};
// 状态
const userStatus = computed(() => {
  return !props.userInfo.realNameTime ? "未实名" : (props.userInfo.tradeUnionName ? "" : "未入会");
});
// 去微信小程序页面
const goWxpage = () => {
  let url = "";
  if (userStatus.value === "未实名"){ url = "../certification/certification"}
  if (userStatus.value === "未入会"){ url = "../applyMemberShip/applyMemberShip"}
  url && wxPageRedirect(url);
};
// 脱敏
const desens = (str) => {
  if(!str) return ''
  str = str.substr(0, 3) + "***" + str.substr(-3);
  return str;
};
// 点击跳转个人中心
const handleCenter = () => {
  router.push({name: 'Mine',query: {token: route.query.token}})
}
</script>
<style scoped>
.login_box {
  border-radius: 0.6rem;
  padding: 1.8rem 1.6rem;
  background: #ffffff;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
}
.login_center{
  position: absolute;
  bottom: 2rem;
  right: 3rem;
}
.login_box .head_img {
  width: 6.4rem;
  height: 6.4rem;
  border-radius: 50%;
  margin-right: 1.6rem;
  background: #f4f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.login_box .head_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.status {
  background: #f0520a;
  color: #ffffff;
  padding: 0.4rem;
  position: absolute;
  top: 1rem;
  right: -4rem;
  width: 12rem;
  text-align: center;
  transform: rotate(45deg);
}
</style>
